// 绘制
export const draw = function () {
  const {ctx} = _.initCanvas('saveRestore')
  this.ctx = ctx
  ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
  ctx.save(); // 保存默认状态

  ctx.fillStyle = "#09F"; // 在原有配置基础上对颜色做改变
  ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

  ctx.save(); // 保存当前状态
  ctx.fillStyle = "#FFF"; // 再次改变颜色配置
  ctx.globalAlpha = 0.5;
  ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形

  ctx.restore(); // 重新加载之前的颜色状态
  ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形

  ctx.restore(); // 加载默认颜色配置
  ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
}


// 绘制
export const draw1 = function () {
  const ctx = this.ctx 
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      ctx.save(); // 暂存画布全部状态
      ctx.fillStyle = "rgb(" + 51 * i + ", " + (255 - 51 * i) + ", 255)"
      ctx.translate(10 + j * 50, 10 + i * 50) // 坐标轴平移
      ctx.rotate((Math.PI / 180) * 25) // 坐标轴旋转
      ctx.scale(1, 1.5)  // 坐标轴缩放
      ctx.fillRect(200, 0, 25, 25)
      ctx.restore() // 恢复画布全部状态
    }
  }
}